<template>
	<div>
		<div class="topTitle">试题上传</div>
		<div class="container">
			<div class="handle-box row-me row-center">
				<el-input v-model="query.userName" placeholder="请输入用户姓名或试卷标题" class="handle-input mr20"></el-input>
				<el-select filterable v-model="query.status" placeholder="审核状态" clearable class="handle-select mr20">
					<el-option key="0" label="未审核" value="0"></el-option>
					<el-option key="1" label="通过" value="1"></el-option>
					<el-option key="2" label="驳回" value="2"></el-option>
				</el-select>
				<el-date-picker type="datetime" placeholder="起始日期" v-model="query.startTime" value-format="yyyy-MM-dd hh:mm:ss"
					class="handle-input mr10"></el-date-picker>
				<el-date-picker type="datetime" placeholder="截止时间" v-model="query.endTime" value-format="yyyy-MM-dd hh:mm:ss"
					class="handle-input mr10"></el-date-picker>
			</div>
			<div class="row-me row-center space-between margin-bottom20">
				<div class="row-me row-center">
					<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
					<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
					<div class="blue-text ml20" @click="hintSetVisible=true">提示语设置</div>
				</div>
				<div class="row-me row-center">
					<span class="blue-text mr10">是否开启上传</span>
					<el-switch v-model="hintTableData[0].isUploadOpen" @change="uploadChange">
					</el-switch>
				</div>
			</div>
			<el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header-style"
				@selection-change="handleSelectionChange">
				<el-table-column type="expand">
					<template slot-scope="props">
						<div v-if="props.row.images">
							<el-image style="float: left;margin-right: 20px;" v-for="(item,index) in props.row.images.split(',')"
								:key="index" class="table-td-thumb" :src="item" :preview-src-list="[item]"></el-image>
						</div>
					</template>
				</el-table-column>
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column label="序号" width="55" align="center">
					<template slot-scope="scope">
						{{scope.$index + 1}}
					</template>
				</el-table-column>
				<el-table-column prop="createBy" label="上传人ID/头像/昵称" width="200">
					<template slot-scope="scope">
						<div class="row-me row-center">
							<el-image :preview-src-list="[scope.row.userIcon]" :src="scope.row.userIcon"
								class="width40 height40 radius50per"></el-image>
							<div class="column-me margin-left5">
								<span>{{scope.row.userId||''}}</span>
								<span>{{scope.row.userName||''}}</span>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="description" label="题目描述" width="400"></el-table-column>
				<el-table-column label="所属地区">
					<template slot-scope="scope">
						<div v-if="scope.row.provinces||scope.row.cityName">
							<span>{{scope.row.provinces||""}}/</span>
							<span>{{scope.row.cityName||""}}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="是否包含解析">
					<template slot-scope="scope">
						<span>{{scope.row.analysis?'包含':'不包含'}}</span>
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.status==1">通过</el-tag>
						<el-tag type="info" v-else-if="scope.row.status==0">未审核</el-tag>
						<el-tag type="warning" v-else="scope.row.status==1">驳回</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="上传时间"></el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-delete" v-if="scope.row.status == 0"
							@click="handleSH(scope.$index, scope.row)">审核</el-button>

						<el-button type="text" icon="el-icon-delete" class="red"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
					@size-change="handleSizeChange" :current-page="query.pageIndex" :total="pageTotal"
					@current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 提示语设置 -->
		<el-dialog title="上传提示语设置" :visible.sync="hintSetVisible" width="50%">
			<div class="margin-bottom20">
				<span>功能开启状态：</span>
				<el-switch v-model="hintTableData[0].isUploadTipsOpen" @change="uploadChange"></el-switch>
			</div>
			<el-table :data="hintTableData">
				<el-table-column label="科目" prop="name" align="center"></el-table-column>
				<el-table-column label="内容" prop="uploadTips" align="center"></el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>

						<el-button type="text" icon="el-icon-delete">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button @click="hintSetVisible = false">取 消</el-button>
				<el-button type="primary" @click="hintSetVisible=false">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 新建标题语 -->
		<el-dialog title="新建标题语" :visible.sync="createHintVisible" width="40%">
			<el-form :model="hintSetObj" ref="ruleForm" label-width="100px" :rules="hintRules">
				<el-form-item label="选择科目" prop="name">
					<el-select v-model="hintSetObj.name" placeholder="请选择所属科目">
						<el-option v-for="(item,index) in miniApps" :key="item.id" :label="item.name" :value="item.name">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="提示语" prop="uploadTips">
					<el-input v-model="hintSetObj.uploadTips" type="textarea" :rows="4" placeholder="请输入提示语"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="createHintVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑弹出框 -->
		<el-dialog title="审核" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="110px">
				<el-form-item label="审核状态">
					<el-select filterable v-model="form.status" @change="form.days = ''" placeholder="审核状态" clearable>
						<el-option key="1" label="通过" value="1"></el-option>
						<el-option key="2" label="驳回" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="回复内容">
					<el-input v-model="form.comment" type="textarea" :rows="6" placeholder="请输入回复内容">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'basetable',
		data() {
			return {
				loading: true,
				query: {
					userName: '',
					status: "",
					userId: '',
					startTime: '',
					endTime: '',
					switch: true,
					pageIndex: 1,
					pageSize: 30
				},
				optionNoArr: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'], //选择题题号数组
				userVisible: true,
				tableData: [],
				multipleSelection: [],
				delList: [],
				editVisible: false,
				pageTotal: 0,
				form: {
					id: '',
					status: '',
					days: ''
				},
				idx: -1,
				id: -1,
				hintSetVisible: false,
				hintSetObj: {
					status: true
				},
				hintTableData: [{
					isUploadOpen: false
				}],
				createHintVisible: false,
				hintRules: {
					name: {
						required: true,
						message: '请选择科目',
						trigger: 'change'
					},
					uploadTips: {
						required: true,
						message: '请输入标题语',
						trigger: 'blur'
					}
				},
				miniApps: []
			};
		},
		created() {
			this.getData();
			this.getMiniApp()
			this.getminiApp()
		},
		methods: {
			handleEdit(row) {
				this.hintSetObj = row
				this.createHintVisible = true
			},
			async getminiApp() {
				const res = await this.$get('/admin/minis/getAll')
				this.miniApps = res.data;
			},
			async uploadChange(val) {
				const res = await this.$post('/admin/minis/add', {
					id: this.hintTableData[0].id,
					isUploadOpen: this.hintTableData[0].isUploadOpen,
					uploadTips: this.hintTableData[0].uploadTips,
					isUploadTipsOpen: this.hintTableData[0].isUploadTipsOpen
				})
				this.$message.success('操作成功')
				this.getMiniApp()
			},
			async getMiniApp() {
				const res = await this.$postForm('/admin/minis/getMiniApp')
				this.hintTableData = [res.data]
			},
			submitForm(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						const res = await this.$post('/admin/minis/add', this.hintSetObj)
						if (res.code == 1000) {
							this.$message.success('操作成功')
							this.getMiniApp()
							this.createHintVisible = false
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			async getData() {
				this.query.userId = '';
				const res = await this.$get('/admin/user/pageUpload', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list;
					this.pageTotal = res.data.totalRow;
				}
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageIndex', 1);
				this.getData();
			},
			handleRefresh() {
				this.query = {
					userName: '',
					status: "",
					userId: '',
					startTime: '',
					endTime: '',
					pageIndex: 1,
					pageSize: 30
				}
				this.handleSearch()
			},
			// 删除操作
			handleDelete(index, row) {
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					let vm = this;
					this.$get('/admin/user/deleteUpload', {
						ids: row.id
					}).then(function(response) {
						if (response.code != 1000) {
							this.$message.error('服务异常');
							return;
						}
						this.$message.success('删除成功');
						this.getData
					});

				}).catch(() => {});
			},
			// 多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			delAllSelection() {
				const length = this.multipleSelection.length;
				let str = '';
				this.delList = this.delList.concat(this.multipleSelection);
				for (let i = 0; i < length; i++) {
					str += this.multipleSelection[i].id + ',';
				}
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					let vm = this;
					this.$get('/admin/user/deleteUpload', {
						ids: str
					}).then(function(response) {
						if (response.data.code != 1000) {
							vm.$message.error('服务异常');
							return;
						}
						vm.$message.success('删除成功');
						vm.getData();
					});

				}).catch(() => {});
			},
			// 审核
			handleSH(index, row) {
				this.idx = index;
				this.form.id = row.id;
				this.form.status = '';
				this.editVisible = true;
			},
			// 保存编辑
			saveEdit() {
				this.editVisible = false;
				let vm = this;
				this.$get('/admin/user/reviewUpload', this.form).then(function(response) {
					if (response.code != 1000) {
						vm.$message.error('服务异常');
						return;
					}
					vm.$message.success('审核成功');
					vm.getData();
				});
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getData();
			}
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 200px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 16px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 80px;
		height: 80px;
		margin-left: 20px;
	}
</style>